<template>
  <div class="one" type="flex" @mouseleave="yincang()">
    <div class="zuida" type="flex">
      <div class="hezi" type="flex">
        <ul class="hezi_ul">
          <li @mouseover="xianshi(index)" v-for="(item,index) in shuju" :key="index">
            {{item.type}}
            <i>></i>
          </li>
        </ul>
      </div>
      <div class="hezi_limian" v-if="isShow">
        <div v-for="(item,index) in TabLeiBiao" :key="index">
          {{index+1}}
          <span>
            <a href="#" @click="childClick(item.city)">{{item.city}}</a>
          </span>
          <span class="neirong">
            <a href="#" @click="childClick(item.city)">{{item.desc}}</a>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shuju: [],
      isShow: false, //鼠标移动上去后显示
      TabLeiBiao: [] //子菜单数据
    };
  },
  mounted() {
    this.$axios({
      url: "/posts/cities"
    }).then(res => {
      this.shuju = res.data.data;
       console.log(this.shuju);
    });
  },
  methods: {
    //鼠标移入显示
    xianshi(index) {
      this.isShow = true;
      this.TabLeiBiao = this.shuju[index].children;
      // console.log(this.TabLeiBiao);
    },
    //鼠标移出隐藏
    yincang(index) {
      this.isShow = false;
      // this.
    },
    childClick(one){
      // console.log(one);
      
      this.$emit('childByValue',one)
    }
  }
};
</script>

<style lang="less" scoped>
.one {
  height: 165px;
  width: 260px;
}
.zuida {
  float: left;
}

.hezi {
  position: relative;
  height: 167px;
  border: 1px solid #cccccc;
   z-index: 11;
  width: 260px;
  .hezi_ul {
     z-index: 11;
    line-height: 41px;
    li {
      display: flex;
      z-index: 11;
      padding: 0 18px;
      border-bottom: 1px solid #ccc;
      i {
        padding-left: 145px;
      }
    }
  }
}
.hezi_limian {
  // float: left;
  position: absolute;
  height: 196px;
  width: 350px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  margin-top: -169px;
  margin-left: 261px;

  div {
    line-height: 38px;
    margin-left: 20px;
    color: orange;
    font-size: 16px;
    font-weight: 600;

    span {
      margin-left: 10px;
    }
    .neirong {
      color: #999;
    }
  }
}



li:hover {
  color: skyblue;
  border-right: 2px solid #fff;
}
li:nth-child(4) {
  border-bottom: none;
}
</style>